<template>
  <div class="header-boxs" :style="{ height: height + 'px' }">
    <div class="header-left-boxs">
			<i class="header-logo-icon"></i>
			<div class="header-logo-text">用户管理中心</div>
    </div>
    <div class="header-right-boxs">
			<div class="header-right-upload" title="刷新" @click="reload">
			  <i class="el-icon-refresh-right" />
			</div>
			<div class="header-right-user">
				<div class="header-welcome">欢迎来到用户管理中心平台！</div>
				<div class="header-name">
				  <el-dropdown trigger="hover" @command="command">
						<div class="header-dropdown-link">
							<img class="header-photo" src="../assets/img/hearder.png" alt>
							<span>{{ loginData.userName }}</span>
							<i class="header-el-bottom el-icon-caret-bottom"></i>
						</div>
				    <el-dropdown-menu slot="dropdown">
				      <el-dropdown-item divided command="exit">退出</el-dropdown-item>
				    </el-dropdown-menu>
				  </el-dropdown>
				</div>
			</div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import Common from 'common/common'
const com = new Common()
export default {
  name: 'Header',
  props: {
    height: {
      type: Number,
      default: () => {}
    },
    type: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      isCollapse: false,
      formLabelWidth: '100px'
    }
  },
  computed: {
  },
  methods: {
    // 获取vuex，Actions定义方法
    ...mapActions(['logout']),
    // 用户下拉菜单权限
    async command(e) {
      if (e === 'exit') {
        await this.logout()
        this.$router.push({ name: 'login' })
      } else {
        this.ruleForm = this.$options.data().ruleForm
        this.resetPwd()
      }
    },
		reload() {
		  this.$emit('reload')
		},
  }
}
</script>
